<template>
  <div class="left-card">
    <m-card title="地震统计">
      <v-chart ref="vChart" :option="option" :autoresize="true" />
    </m-card>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
import mCard from "@/components/mCard/index.vue";
import VChart from "vue-echarts";
// 图表配置（保持不变）
const option = ref({
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["3.0-3.9", "4.0-4.9", "5.0+"],
    textStyle: {
      color: "#ffffff", // 设置图例文字颜色为白色
      fontSize: 14, // 设置图例文字大小（可选）
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["8月", "9月", "10月", "11月", "12月", "1月", "2月","3月","4月","5月","6月","7月"
    ],
    axisLabel: {
      formatter: (value) => value, // 显示为百分比
      color: "#ffffff", // 结合之前的需求，设置字体颜色（白色）
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      formatter: (value) => value, // 显示为百分比
      color: "#ffffff", // 结合之前的需求，设置字体颜色（白色）
    },
  },
  series: [
    {
      name: "3.0-3.9",
      type: "line",
      stack: "Total",
      data: [120, 132, 101, 134, 90, 230, 210,220, 182, 191, 234, 290,],
      // 关键：设置系列颜色，图例颜色会自动同步
      itemStyle: {
        color: "#409EFF", // 按索引取颜色（与系列一一对应）
      },
    },
    {
      name: "4.0-4.9",
      type: "line",
      stack: "Total",
      data: [220, 182, 191, 234, 290, 330, 310,100,200,243,412,18],
      // 关键：设置系列颜色，图例颜色会自动同步
      itemStyle: {
        color: "#E6A23C", // 按索引取颜色（与系列一一对应）
      },
    },
    {
      name: "5.0+",
      type: "line",
      stack: "Total",
      data: [150, 232, 201, 154, 190, 330, 410,220, 182, 191, 234, ],
      // 关键：设置系列颜色，图例颜色会自动同步
      itemStyle: {
        color: "#F56C6C", // 按索引取颜色（与系列一一对应）
      },
    },
  ],
});
</script>
<style lang="scss"></style>
